@import "https://fonts.loli.net/css?family=Source+Sans+Pro:100,300,400,600";
@import "https://fonts.loli.net/css?family=Noto+Serif+SC:100,300,400,600";
@import "https://fonts.loli.net/css?family=Noto+Serif+SC:400,700&display=swap&subset=chinese-simplified";


* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;

  &::before {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.06;
    position: fixed;
    background: center/cover no-repeat;
    background-image: url("../img/indexBackground.png");
  }
}

main {
  position: relative;
  flex: 1;
  top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  min-width: 700px;

  .placeHolder {
    min-height: 50px;
  }

  .top-container {
    position: relative;
    width: 66.6666%;
    //max-width: 950px ;
    min-height: 150px;
    max-height: 150px;
    //background-color: red ;
    box-shadow: 0px 0px 5px black;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    &::before {
      content: "";
      position: absolute;
      top: -55px;
      width: 750px;
      height: 70px;
      left: 50%;
      margin-left: -375px;
      background: url("../img/spr-1.png") no-repeat;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: -55px;
      width: 750px;
      height: 70px;
      left: 50%;
      margin-left: -375px;
      background: url("../img/spr-2.png") no-repeat;
    }

    .time-stamp {
      position: absolute;
      top: -30px;
      left: 10px;
      user-select: none;
      white-space: nowrap;

      #site-time {
        margin-left: 30px;
        font-size: 0.7em;
        font-weight: 400;
        letter-spacing: 1.5px;
        color: #636e72;
      }
    }

    .type-box {
      position: relative;
      width: auto;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      #hitokoto-text {
        position: relative;
        width: 0;
        padding: 0;
        padding-bottom: 20px;
        overflow: hidden;
        line-height: 40px;
        text-align: center;
        font-weight: 700;
        font-size: 20px;
        letter-spacing: 1.7px;
        text-shadow: 0px 0px 2px #b1b1b1;
        white-space: nowrap;

        -webkit-animation: typer 4s steps(36, end) forwards;
        animation: typer 4s steps(36, end) forwards;
        animation-delay: 1.5s;
        font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
      }

      .bottom-blink {
        width: 15px;
        margin-bottom: -2px;
        margin-left: 2px;
        border-bottom: solid 2px black;
        animation: typeBlink 500ms steps(44) infinite normal;
      }
    }

    #hitokoto-info {
      position: absolute;
      bottom: 10px;
      right: 10px;
      letter-spacing: 1.5px;
      color: #2d3436;
      text-shadow: 1px 1px 2px #606975, -1px -1px 2px white;
      font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
    }

    .fun-btn-1 {
      position: absolute;
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      background-color: #f5f6fa;
      left: -15px;
      top: 20px;
      -webkit-box-shadow: 0px 0px 5px #353b48;
      box-shadow: 0px 0px 5px #353b48;
      transition: 0.3s;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: #0f1423;
      text-decoration: none;

      .iconfont {
        position: relative;
        transition: 0.3s;
        font-size: 20px;
        box-sizing: border-box;
      }

      /* &::before{
          content: "";
          box-sizing: border-box;
          position: absolute;
          display: none;
          width: 40px ;
          height: 40px ;
          left: 50% ;
          margin-left: -20px ;
          top: 50% ;
          margin-top: -20px ;
          border: solid 1px #2f3640 ;
          transition: 0.3s ;
          transform: scale(2);
          opacity: 0 ;
      }
      &::after{
          content: "";
          box-sizing: border-box;
          position: absolute;
          display: none;
          width: 50px ;
          height: 50px ;
          left: 50% ;
          margin-left: -25px ;
          top: 50% ;
          margin-top: -25px ;
          border: solid 2px #2f3640 ;
          transition: 0.3s ;
          transform: scale(2);
          opacity: 0 ;
      } */

      &:hover {
        background-color: #2f3640;
        transform: rotateZ(90deg);

        .iconfont {
          color: #f8f8f2;
        }
      }

      /* &:hover::before{
          display: block;
          opacity: 0.9 ;
          transform: scale(1) ;
          border: solid 2px transparent ;
      }
      &:hover::after{
          display: block;
          opacity: 0.9 ;
          transform: scale(1) ;
          border: solid 2px transparent ;
      } */
    }

    .fun-btn-2 {
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: #f5f6fa;
      left: -15px;
      bottom: 20px;
      -webkit-box-shadow: 0px 0px 5px #353b48;
      box-shadow: 0px 0px 5px #353b48;
      transition: 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 30px;

      .iconfont {
        transition: 0.3s;
      }

      &::before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: solid 2px #fab1a0;
        width: 150%;
        height: 150%;
        left: 50%;
        margin-left: -75%;
        top: 50%;
        margin-top: -75%;
        transition: 0.3s;
        transform: scale(0);
        transform-origin: 50% 50%;
        -webkit-box-shadow: 0px 0px 7px #535c68;
        -moz-box-shadow: 0px 0px 7px #535c68;
        box-shadow: 0px 0px 7px #535c68;
        z-index: -1;
      }

      &::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: solid 1px #ff7675;
        width: 170%;
        height: 170%;
        left: 50%;
        margin-left: -85%;
        top: 50%;
        margin-top: -85%;
        transition: 0.3s;
        transform: scale(0);
        transform-origin: 50% 50%;
        -webkit-box-shadow: 0px 0px 7px #535c68;
        -moz-box-shadow: 0px 0px 7px #535c68;
        box-shadow: 0px 0px 7px #535c68;
        z-index: -1;
      }

      &:hover {
        opacity: 0.9;
        transform: rotateZ(45deg);
        background-image: linear-gradient(150deg, #ff7675, #fab1a0, #81ecec, #18dcff,);
        background-size: 300%;
        animation: bgAnimation 5s infinite;
      }

      &:hover .iconfont {
        color: white;
        font-size: 30px;
      }

      &:hover::before {
        transform: scale(1);
        animation: btnRote1 2s infinite;
      }

      &:hover::after {
        transform: scale(1);
        animation: btnRote2 2s infinite;
      }
    }
  }

  .main-container {
    position: relative;
    margin-top: 10px;
    flex: 1;
    display: flex;
    width: 66.6666%;
    //max-width: 75% ;
    //max-width: 950px;
    flex-direction: column;
    //background-color: green ;
    .article-box {
      position: relative;
      flex: 0 auto;
      width: 100%;

      height: 220px;
      margin-bottom: 50px;
      padding: 0;
      transition-duration: 0.5s;
      //background: red ;
      .post-meta {
        position: absolute;
        top: 20px;
        left: 30px;
        width: auto;
        user-select: none;
        letter-spacing: 1.2px;
        font-size: 0.7em;
        font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
        color: #2f3542;

        a {
          color: #2f3542;
          margin-left: 5px;
        }

        .post-cate {
          text-decoration: underline;
        }

        .post-tag {
          margin-left: 5px;
          text-decoration: underline;
        }
      }

      .article-title {
        position: absolute;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        top: 40px;
        left: 10px;
        height: 40px;
        width: auto;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1.3px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        z-index: 1;
        font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
        color: #2f3542;
        transition: 0.5s;
        cursor: pointer;
        z-index: 1;

        &:hover {
          background-color: #2f3542;
          color: #f1f2f6;
        }

      }

      .box-background {
        position: absolute;
        height: 70%;
        width: 100%;
        bottom: 0;
        /* -webkit-box-shadow: 0px 5px 5px #747d8c;
        box-shadow: 0px 5px 5px #747d8c; */
      }

      .box-main {
        position: absolute;
        height: 70%;
        width: 100%;
        bottom: 0px;
        background-color: rgba(241, 242, 246, 0.5);

        &::before {
          content: "";
          position: absolute;
          display: block;
          width: 380px;
          height: 100%;
          right: 50%;
          margin-right: -190px;
          top: -90px;
          background: url("../img/bg-zero-1.png") no-repeat;
          z-index: -1;
          transition-duration: 0.4s;
        }

        &::after {
          content: "";
          position: absolute;
          display: block;
          width: 800px;
          height: 40px;
          right: 50%;
          margin-right: -400px;
          bottom: -20px;
          background: url("../img/bg-zero-2.png") no-repeat;
          z-index: -1;
          transition-duration: 0.4s;
        }

        /* &::after {
          content: "";
          display: block;
          width: 0px;
          height: 0px;
          background-color: skyblue;
          top: 0px;
          right: 0px;
          border-bottom: 20px solid #ced6e0;
          border-left: 20px solid #ced6e0;
          border-right: 20px solid #ffffff;
          border-top: 20px solid #ffffff;
          position: absolute;
          -webkit-filter: drop-shadow(-5px 5px 3px rgba(0, 0, 0, 0.3));
                  filter: drop-shadow(-5px 5px 3px rgba(0, 0, 0, 0.3));
        }
        &::before {
          content: "";
          display: block;
          width: 0px;
          height: 0px;
          border-top: 30px solid #ced6e0;
          border-right: 30px solid #ced6e0;
          border-left: 30px solid #ffffff;
          border-bottom: 30px solid #ffffff;
          bottom: 0px;
          left: 0px;
          position: absolute;
          -webkit-filter: drop-shadow(7px -7px 5px rgba(0, 0, 0, 0.3));
                  filter: drop-shadow(7px -7px 5px rgba(0, 0, 0, 0.3));
          margin-right: 10%;
        } */

        p {
          text-indent: 2em;
          font-size: 14px;
          letter-spacing: 1.3px;
          line-height: 1.7em;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, .04);
          overflow: hidden;
          text-overflow: ellipsis;
          position: absolute;
          right: 50px;
          left: 50px;
          bottom: 30px;
          top: 20px;
          font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
          color: #606975;
        }
      }

      &:hover {
        box-shadow: 0 1px 20px -6px rgba(0, 0, 0, .5);

        .box-main::before {
          top: -115px;
        }

        .box-main::after {
          bottom: -45px;
        }

        .article-title {
          background-color: #2f3542;
          color: #f1f2f6;
        }
      }
    }

    .article-footer {
      position: relative;
      margin-top: 50px;
      width: auto;
      height: auto;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 60px 40px 20px;
      box-sizing: border-box;

      a {
        text-decoration: none;
        color: rgba(53, 51, 60, 1.0);
      }

      .bottom-page-item {
        position: absolute;

        a {
          position: relative;
          text-decoration: none;
          display: block;
          width: 35vw;
          height: 40px;
          background: rgba(255, 254, 250, 1.0);
          text-align: left;
          padding: 0 20px 0 10px;
          transform: rotate(-10deg) skewX(15deg) translate(0, 0);
          transition: 0.5s;
          box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);

          .iconfont {
            position: relative;
            font-size: 20px;
            color: red;
            line-height: 20px;
            transition: 0.5s;
            padding-right: 14px;
            transform: translateY(0);
            display: inline-block;
            filter: drop-shadow(5px 5px 10px rgba(99, 7, 28, 1.0));
          }

          span {
            position: relative;
            color: #333;
            letter-spacing: 3px;
            transition: 0.5s;
            margin-top: 10px;
            margin-left: 0;
            display: inline-block;
            box-sizing: border-box;
            transition-duration: 0.3s;
          }

          &::before {
            content: "";
            position: absolute;
            top: 5px;
            left: -10px;
            height: 100%;
            width: 10px;
            background: #b1b1b1;
            transition: 0.5s;
            transform: rotate(0deg) skewY(-45deg);
          }

          &::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: -5px;
            height: 10px;
            width: 100%;
            background: #b1b1b1;
            transition: 0.5s;
            transform: rotate(0deg) skewX(-45deg);
          }

          &:hover {
            transform: rotate(-15deg) skewX(15deg) translate(20px, -10px);
            box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.7);
            background-color: #dd4b38;

            .iconfont {
              font-size: 40px;
              color: #ffffff;
              transform: translateY(-5px);
            }

            span {
              color: #ffffff;
            }
          }

          &:hover::after {
            background-color: #dd4b39;
          }

          &:hover::before {
            background-color: #A13A2B;
          }
        }
      }

      .page-item1 {
        left: -20px;
        bottom: 20px;
      }

      .page-item2 {
        left: 120px;
        bottom: 20px;

        &:hover {
          span {
            margin-left: 60%;
          }
        }
      }

      .bottom-page-jump-list {
        position: relative;
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        flex: 1;
        margin: 0 30px;
        z-index: 10;

        .bottom-page-jump {
          position: relative;
          width: 30px;
          height: 30px;
          color: red;
          font-size: 10px;
          text-align: center;
          line-height: 30px;
          transition: 0.5s;
          background-color: #fff;
          box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
          transform: rotate(-30deg) skewX(15deg) translate(0, 0);

          &::before {
            content: "";
            position: absolute;
            top: 5px;
            left: -9.5px;
            height: 100%;
            width: 10px;
            background: #b1b1b1;
            transition: 0.5s;
            transform: rotate(0deg) skewY(-45deg);
          }

          &::after {
            content: "";
            position: absolute;
            bottom: -9px;
            left: -4.5px;
            height: 10px;
            width: 100%;
            background: #b1b1b1;
            transition: 0.5s;
            transform: rotate(0deg) skewX(-45deg);
          }

          &:hover {
            transform: rotate(-30deg) skewX(15deg) translate(10px, -10px);
            box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.7);
            background-color: #dd4b38;
            cursor: pointer;
            color: #ffffff;
          }

          &:hover::after {
            background-color: #dd4b39;
          }

          &:hover::before {
            background-color: #A13A2B;
          }
        }

        .page-jump-hover {
          transform: rotate(-30deg) skewX(15deg) translate(-20px, 20px);
          box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.7);
          background-color: rgba(19, 72, 87, 1.0);
          cursor: pointer;
          color: #ffffff;

          &::after {
            background-color: rgba(33, 55, 61, 1.0);
          }

          &::before {
            background-color: rgba(19, 44, 51, 1.0);
          }

          &:hover {
            transform: rotate(-30deg) skewX(15deg) translate(-10px, 10px);
            box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.7);
            background-color: rgba(19, 72, 87, 1.0);
            cursor: pointer;
            color: #ffffff;
          }

          &:hover::after {
            background-color: rgba(33, 55, 61, 1.0);
          }

          &:hover::before {
            background-color: rgba(19, 44, 51, 1.0);
          }
        }
      }
    }
  }
}

